<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>站点管控</title>
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="../lib/jquery/jquery-3.4.1.js"></script>
    <script src="../lib/echarts/echarts.js"></script>
    <script src="../lib/echarts/echarts-gl.js"></script>
    <script src="../lib/layui/layui.js"></script>
    <script src="../js/heatmap.js"></script>
</head>
<body>
<div class="verticalLine" style="left: 18vw;">
    <div></div>
    <div></div>
</div>
<div class="verticalLine" style="right: 18vw;">
    <div></div>
    <div></div>
</div>
<section class="section aside left">
    <section class="left-top">
        <div class="boxTitle">
            <div class="boxTitleLeft"></div>
            <div class="boxTitleRight"></div>
            <span>站名</span>
        </div>
        <div>
            <!-- TODO: left-top section -->
        </div>
    </section>
    <section class="left-middle">
        <div class="boxTitle">
            <div class="boxTitleLeft"></div>
            <div class="boxTitleRight"></div>
            <span>title 2</span>
        </div>
        <div>
            <!-- TODO: left-middle section -->
            <div>
                <p>
                    <span>第一幅图:</span>
                    <select style="width: 200px;" id="firstSelect">
                        <option style="display: none"></option>
                        <option value="0">b.csv</option>
                        <option value="1">c.csv</option>
                    </select>
                </p>
                <p>
                    <span>第二幅图:</span>
                    <select style="width: 200px;" id="secondSelect">
                        <option style="display: none"></option>
                        <option value="0">b.csv</option>
                        <option value="1">c.csv</option>
                    </select>
                </p>
            </div>
        </div>
    </section>
    <section class="left-bottom">
        <div class="boxTitle">
            <div class="boxTitleLeft"></div>
            <div class="boxTitleRight"></div>
            <span>title 3</span>
        </div>
        <div style="background-color: #74301c;">
            <!-- TODO: left-bottom section -->
        </div>
    </section>
</section>
<section class="section center">
    <header>站&nbsp;点&nbsp;管&nbsp;控</header>
    <div class="center-content">
        <!-- <div>
             <section style="background-color: #1c7430;"></section>
             <section style="background-color: #721c24;"></section>
             <section style="background-color: #1c7430;"></section>
         </div>
         <div>
             <section style="background-color: #721c24;"></section>
             <section style="background-color: #1c7430;"></section>
             <section style="background-color: #721c24;"></section>
         </div>-->
        <div style="width:100%;height:100%;position: relative;">
            <div id="heatMap" style="width: 100%;height:100%;position: absolute;left: 50px;"></div>
            <div id="line" style="width: 100%;height:100%;position: absolute;left: 50px;"></div>
        </div>
    </div>
</section>
<section class="section aside right">
    <section>
        <!--        <div class="boxTitle">
                    <div class="boxTitleLeft"></div>
                    <div class="boxTitleRight"></div>
                    <span>信息</span>
                </div>
                <div style="background-color: #1c7430;">
                    &lt;!&ndash; TODO: right-top section &ndash;&gt;
                </div>-->
    </section>
    <!--<section>
       &lt;!&ndash; <div class="boxTitle">
            <div class="boxTitleLeft"></div>
            <div class="boxTitleRight"></div>
            <span>title 1</span>
        </div>
        <div style="background-color: #74301c;">
            &lt;!&ndash; TODO: right-bottom section &ndash;&gt;
        </div>&ndash;&gt;
    </section>-->
</section>
</body>
</html>